<script setup>

const memberList = ref([
  {
    memberId: 1,
    memberName: '黄金会员',
    vipBg: new URL('../../assets/imgs/img03.png', import.meta.url).href,
    vipTextImg: new URL('../../assets/imgs/vip_text01.png', import.meta.url).href,
    vipIconImg: new URL('../../assets/imgs/icon04.png', import.meta.url).href,
    ProductList: [{
      GoodsProductId: 1,
      ProductName: '永久访问文字转语音功能'
    }]
  },
  {
    memberId: 2,
    memberName: '白银会员',
    vipBg: new URL('../../assets/imgs/img04.png', import.meta.url).href,
    vipTextImg: new URL('../../assets/imgs/vip_text02.png', import.meta.url).href,
    vipIconImg: new URL('../../assets/imgs/icon04.png', import.meta.url).href,
    ProductList: []
  },
  {
    memberId: 3,
    memberName: '普通会员',
    vipBg: new URL('../../assets/imgs/img07.png', import.meta.url).href,
    vipTextImg: new URL('../../assets/imgs/vip_text03.png', import.meta.url).href,
    vipIconImg: new URL('../../assets/imgs/icon05.png', import.meta.url).href,
    ProductList: []
  }
])
const type = ref(1)
function handleTypeChange(e) {
  type.value = e.memberId
}

const activeItem = computed(() => {
  return memberList.value.filter(item => item.memberId === type.value)[0]
})

</script>

<template>
  <div class="member-page">
    <div class="top-type-box">
      <div
        v-for="item in memberList"
        :key="item.memberId"
        :class="['item', type == item.memberId ? 'active' : '']"
        @click="handleTypeChange(item)"
      >
        {{ item.memberName }}
      </div>
    </div>
    <div class="vip-img-wrap">
      <img class="bg-img" :src="activeItem.vipBg" />
      <img class="text-img" :src="activeItem.vipTextImg" />
      <img class="icon-img" :src="activeItem.vipIconImg" />
    </div>
    <div class="title">{{ activeItem.memberName }}您将享受到的以下专属服务</div>
    <div class="info-wrap">
      <div
        class="info-item"
        v-for="(item, index) in activeItem.ProductList"
        :key="item.GoodsProductId"
      >
        <div class="label">{{ index + 1 }}、{{ item.ProductName }}</div>
        <!-- <div class="value"
          ><text v-if="item.ProductPrice > 0">¥{{ item.ProductPrice }}*</text>
          {{ item.ProductShare }}</div
        > -->
      </div>
    </div>

    <div class="fix-bottom-wrap">
      <div>立即购买</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.member-page {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 140px;
}
.top-type-box {
  position: sticky;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 99;
  display: flex;
  border-bottom: 1px solid #e7e7e7;
  .item {
    height: 96px;
    line-height: 96px;
    text-align: center;
    width: 50%;
  }
  .active {
    color: #ffc44c;
    position: relative;
    &::after {
      content: "";
      display: block;
      width: 32px;
      height: 6px;
      background-color: #ffc44c;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      border-radius: 1998px;
    }
  }
}

.vip-img-wrap {
  position: relative;
  margin: 20px auto 40px auto;
  width: 686px;
  height: 271px;
  .bg-img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .text-img {
    width: 280px;
    position: absolute;
    left: 36px;
    top: 28px;
    line-height: 99px;
  }
  .icon-img {
    height: 156px;
    position: absolute;
    right: 30px;
    top: 0px;
  }
  .info01 {
    position: absolute;
    top: 104px;
    left: 36px;
    color: #1a1a1a;
    font-size: 26px;
  }
  .info02 {
    position: absolute;
    top: 160px;
    left: 36px;
    color: #947641;
    font-size: 16px;
  }
  .progress-box {
    position: absolute;
    left: 36px;
    right: 150px;
    top: 200px;
  }
  .bot-text {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 230px;
    left: 36px;
    right: 150px;
    color: #947641;
    font-size: 20px;
  }
}

.title {
  padding: 30px 25px;
  font-size: 32px;
}
.info-wrap {
  background-color: #fff;
  padding-left: 32px;
  .info-item {
    padding: 32px 32px 32px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ebedf0;
  }
}

.fix-bottom-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: #fdf9f8;
  padding: 20px 34px;
  text-align: center;
  font-size: 32px;
  line-height: 48px;
}
</style>